<template>
  <div class="context">
    <dv-loading v-if="loading"></dv-loading>
    <div v-else>
      <el-container>
        <el-header class="heard"></el-header>
        <el-main class="centext">
          <RouterView></RouterView>
        </el-main>
      </el-container>
      <!-- 底部 -->
      <div class="button">
        <div class="nav">
            <div class="nav-item" v-for="(item, index) in nav" :key="item.title" @click="buto(index)">
                <router-link :to="{path:item.path}">
                   <img :src="index=== idx? item.img_g2:item.img_g1" alt="">
                   <p style="color: aliceblue; font-size: 12px;">{{ item.title }}</p>
                </router-link>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import Table from "./components/Table.vue";
import imag_g1 from '.././public/image/智能检测.jpg'
import imag_g2 from '.././public/image/智能检测-active.jpg'
import imag_k1 from '.././public/image/就业态势.jpg'
import imag_k2 from '.././public/image/就业态势-active.jpg'
import imag_e1 from '.././public/image/安防管理.jpg'
import imag_e2 from '.././public/image/安防管理-active.jpg'
import imag_t1 from '.././public/image/设备运维.jpg'
import imag_t2 from '.././public/image/设备运维-active.jpg'

import { onMounted, reactive, ref } from "vue";
import { RouterView,useRoute } from "vue-router";
import router from "./router";

const nav = [
  {
    title:'智能检测',
    img_g1:imag_g1,
    img_g2:imag_g2,
    active:true,
    path:'/'
  },
   {
    title:'就业态势',
    img_g1:imag_k1,
    img_g2:imag_k2,
    active:false,
    path:'/home/take'
  },
  {
    title:'安防管理',
    img_g1:imag_e1,
    img_g2:imag_e2,
    active:false,
    path:'/home/security'
  },
  {
    title:'设备运维',
    img_g1:imag_t1,
    img_g2:imag_t2,
    active:false,
    path:'/home/equipment'
  },
]

const idx = ref(0)

const buto = (index:any)=>{
   idx.value =index
}



const loading = ref<boolean>(true);
onMounted(() => {
  dvloading();
});

const dvloading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.context {
  background: url("../../public/image/pageBg.png");
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: 100% 100%;
  // z-index: 999;
}

.heard {
  width: 100%;
  height: 65px;
  background: url("../../public/image/Photo／背景／Top.png") no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 9999;
}

.centext {
  width: 100%;
  height: 100%;
}

.button {
  position: absolute;
  left: 25%;
  z-index: 12;
  bottom: 0;
  width: 50%;
  height: 10%;

  background: url("../../public/image/Photo Bottom.png") no-repeat;
  background-size: 100% 100%;
  z-index: 888;
}

.nav {
  // background: red;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38%;
  background-image: url("../assets1/assets/菜单栏.png");
  background-repeat: no-repeat;
  height: 64px;
  background-size: 100% 100%;
  .nav-item {
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    margin: 0 2px;

    img {
      width: 40px;
      height: 40px;
    }

    p {
      padding: 0;
      margin: 0;
    }
  }
}
</style>